<template>
  <div class="container topic_item">
    <!-- 题干 -->
    <div class="tigan">
      <span>{{ topic.order }}.&nbsp;</span
      ><span style="color: #a8a8b3">(单选题)</span>{{ topic.title }}
    </div>

    <!-- 选项 -->
    <div class="xuanxiang">
      <ol type="A">
        <li
          v-for="(opt, index) in topic.opts"
          :key="opt"
          @click="handleClick(index)"
          :style="{ color: index === choiceIndex ? '#21a0ff' : '' }"
        >
          <span>{{ opt }} </span>
        </li>
      </ol>
    </div>

    <!-- 交卷后才有可能展示的部分 -->
    <answer-explain
      v-if="type == 3"
      :reviewResult="reviewResult"
    ></answer-explain>
  </div>
</template>

<script>
//
import AnswerExplain from "@/components/AnswerExplain.vue";
export default {
  name: "SingleChoice",
  components: { AnswerExplain },
  data() {
    return {
      isShow: false,
      choiceIndex: -1,
      indexToOrder: ["A", "B", "C", "D"],
    };
  },
  props: ["topic", "finish", "examIndex", "answer", "type", "reviewResult"],
  methods: {
    handleClick(index) {
      // console.log("click");
      if (this.type == 0 || this.type == 1) {
        const order = this.indexToOrder[index];
        // 设置choice
        this.choiceIndex = index;

        // 向答题卡填内容
        this.finish(this.topic.order - 1, order);
      } else {
        return;
      }
    },
  },
  mounted() {
    if (this.answer) {
      this.choiceIndex = this.indexToOrder.indexOf(this.answer);
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  min-width: 640px;
  .xuanxiang {
    ol {
      // padding: 0;
      li {
        font-size: 14px;
        margin-top: 16px;
        line-height: 20px;
        font-family: "微软雅黑", "黑体", Arial, Helvetica, sans-serif;
        &:last-child {
          margin-bottom: 0;
        }
        // &:hover {
        //   color: #21a0ff;
        // }
        span {
          display: inline-block;
          margin-right: 20px;
        }
      }
    }
  }
  .whyanwser {
    background-color: #fcf4f4;
    font-size: 12px;
    padding: 10px;
  }
}
</style>